<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>外边距塌陷</title>
</head>
<body>
  <h1>外边距塌陷只会发生在垂直方向，而不会发生在水平方向</h1>
  <h1>只会发生在块级元素的垂直方向上</h1>

  <h2>一样的数，保留其中一个</h2>
  <div id='d1' class="cl1">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus blandit est erat, at fringilla magna scelerisque vitae. Vestibulum vel augue metus. Vestibulum vitae tellus feugiat, molestie ipsum id, dapibus lorem. In porta interdum congue. Nam eget feugiat ex. Vivamus semper leo non mi ultricies eleifend. Nullam sed vulputate nulla. Pellentesque tempus facilisis risus, ut placerat tellus tincidunt ac. Maecenas ac ipsum in sem pretium pretium. Vestibulum in finibus nisl. Fusce laoreet leo vitae tincidunt elementum. In hac habitasse platea dictumst.</p>
    <p>Vivamus pellentesque elit et lorem mattis consequat. Vestibulum pretium nibh eu nibh tristique ornare. Mauris ex odio, ultricies non nulla sed, pharetra viverra velit. Cras odio urna, dapibus sit amet leo vel, feugiat imperdiet tortor. Nulla bibendum malesuada tempor. Maecenas tortor lorem, viverra eget enim et, euismod placerat elit. Nulla facilisi. Nam sed pretium enim. Duis sit amet magna orci. Sed vulputate lacus at mattis fringilla. Ut gravida dignissim risus condimentum finibus. Morbi sit amet purus dapibus justo condimentum tincidunt ut quis nunc.</p>
    <p>Aliquam egestas augue nec ultricies sollicitudin. Donec suscipit faucibus risus, sed ornare nisl molestie ut. Nunc non euismod felis. Proin eu tincidunt purus. Cras venenatis egestas pretium. Nunc in maximus nibh. Mauris imperdiet, ex vitae efficitur facilisis, augue dui laoreet risus, eget fermentum tortor eros vel ante. Ut cursus commodo risus, mollis malesuada nibh pulvinar vitae. Fusce aliquam porta risus, eget interdum ante fringilla non. Morbi eu molestie mi.</p>
  </div>

  <h2>两个正数，取最大的数</h2>
  <div id='d2' class="cl1">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus blandit est erat, at fringilla magna scelerisque vitae. Vestibulum vel augue metus. Vestibulum vitae tellus feugiat, molestie ipsum id, dapibus lorem. In porta interdum congue. Nam eget feugiat ex. Vivamus semper leo non mi ultricies eleifend. Nullam sed vulputate nulla. Pellentesque tempus facilisis risus, ut placerat tellus tincidunt ac. Maecenas ac ipsum in sem pretium pretium. Vestibulum in finibus nisl. Fusce laoreet leo vitae tincidunt elementum. In hac habitasse platea dictumst.</p>
    <p>Vivamus pellentesque elit et lorem mattis consequat. Vestibulum pretium nibh eu nibh tristique ornare. Mauris ex odio, ultricies non nulla sed, pharetra viverra velit. Cras odio urna, dapibus sit amet leo vel, feugiat imperdiet tortor. Nulla bibendum malesuada tempor. Maecenas tortor lorem, viverra eget enim et, euismod placerat elit. Nulla facilisi. Nam sed pretium enim. Duis sit amet magna orci. Sed vulputate lacus at mattis fringilla. Ut gravida dignissim risus condimentum finibus. Morbi sit amet purus dapibus justo condimentum tincidunt ut quis nunc.</p>
    <p>Aliquam egestas augue nec ultricies sollicitudin. Donec suscipit faucibus risus, sed ornare nisl molestie ut. Nunc non euismod felis. Proin eu tincidunt purus. Cras venenatis egestas pretium. Nunc in maximus nibh. Mauris imperdiet, ex vitae efficitur facilisis, augue dui laoreet risus, eget fermentum tortor eros vel ante. Ut cursus commodo risus, mollis malesuada nibh pulvinar vitae. Fusce aliquam porta risus, eget interdum ante fringilla non. Morbi eu molestie mi.</p>
  </div>

  <h2>两个负数，取绝对值最大的数</h2>
  <div id='d3' class="cl1">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus blandit est erat, at fringilla magna scelerisque vitae. Vestibulum vel augue metus. Vestibulum vitae tellus feugiat, molestie ipsum id, dapibus lorem. In porta interdum congue. Nam eget feugiat ex. Vivamus semper leo non mi ultricies eleifend. Nullam sed vulputate nulla. Pellentesque tempus facilisis risus, ut placerat tellus tincidunt ac. Maecenas ac ipsum in sem pretium pretium. Vestibulum in finibus nisl. Fusce laoreet leo vitae tincidunt elementum. In hac habitasse platea dictumst.</p>
    <p>Vivamus pellentesque elit et lorem mattis consequat. Vestibulum pretium nibh eu nibh tristique ornare. Mauris ex odio, ultricies non nulla sed, pharetra viverra velit. Cras odio urna, dapibus sit amet leo vel, feugiat imperdiet tortor. Nulla bibendum malesuada tempor. Maecenas tortor lorem, viverra eget enim et, euismod placerat elit. Nulla facilisi. Nam sed pretium enim. Duis sit amet magna orci. Sed vulputate lacus at mattis fringilla. Ut gravida dignissim risus condimentum finibus. Morbi sit amet purus dapibus justo condimentum tincidunt ut quis nunc.</p>
    <p>Aliquam egestas augue nec ultricies sollicitudin. Donec suscipit faucibus risus, sed ornare nisl molestie ut. Nunc non euismod felis. Proin eu tincidunt purus. Cras venenatis egestas pretium. Nunc in maximus nibh. Mauris imperdiet, ex vitae efficitur facilisis, augue dui laoreet risus, eget fermentum tortor eros vel ante. Ut cursus commodo risus, mollis malesuada nibh pulvinar vitae. Fusce aliquam porta risus, eget interdum ante fringilla non. Morbi eu molestie mi.</p>
  </div>

  <h2>一正一负，取它们的和</h2>
  <div id='d4' class="cl1">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus blandit est erat, at fringilla magna scelerisque vitae. Vestibulum vel augue metus. Vestibulum vitae tellus feugiat, molestie ipsum id, dapibus lorem. In porta interdum congue. Nam eget feugiat ex. Vivamus semper leo non mi ultricies eleifend. Nullam sed vulputate nulla. Pellentesque tempus facilisis risus, ut placerat tellus tincidunt ac. Maecenas ac ipsum in sem pretium pretium. Vestibulum in finibus nisl. Fusce laoreet leo vitae tincidunt elementum. In hac habitasse platea dictumst.</p>
    <p>Vivamus pellentesque elit et lorem mattis consequat. Vestibulum pretium nibh eu nibh tristique ornare. Mauris ex odio, ultricies non nulla sed, pharetra viverra velit. Cras odio urna, dapibus sit amet leo vel, feugiat imperdiet tortor. Nulla bibendum malesuada tempor. Maecenas tortor lorem, viverra eget enim et, euismod placerat elit. Nulla facilisi. Nam sed pretium enim. Duis sit amet magna orci. Sed vulputate lacus at mattis fringilla. Ut gravida dignissim risus condimentum finibus. Morbi sit amet purus dapibus justo condimentum tincidunt ut quis nunc.</p>
    <p>Aliquam egestas augue nec ultricies sollicitudin. Donec suscipit faucibus risus, sed ornare nisl molestie ut. Nunc non euismod felis. Proin eu tincidunt purus. Cras venenatis egestas pretium. Nunc in maximus nibh. Mauris imperdiet, ex vitae efficitur facilisis, augue dui laoreet risus, eget fermentum tortor eros vel ante. Ut cursus commodo risus, mollis malesuada nibh pulvinar vitae. Fusce aliquam porta risus, eget interdum ante fringilla non. Morbi eu molestie mi.</p>
  </div>

  <h1>父子元素如果margin重合，也会出现外边距塌陷</h1>

  <div class="cl2">
    <h1>C</h1>
  </div>
  <div id='d5'>
    <div id='d6'>B</div>
  </div>

  </body>
<style>
  .cl1 {
    background-color: cornsilk;    
    padding-left: 20px;
    padding-right: 20px;
    overflow: hidden;
  }

  .cl2 {
    background-color: darkkhaki;
  }

  #d5 {
    height: 80px;
    margin-top: 10px;
    background-color: darkgray;
  }

  #d6 {
    height: 30px;
    margin-top: 20px;
    background-color: darkgreen;
  }

  #d1 p {
    background-color: cyan;
    margin-top: 10px;
    margin-bottom: 10px;
  }

  #d2 p {
    background-color: cyan;
    margin-top: 20px;
    margin-bottom: 10px;
  }

  #d3 p {
    background-color: cyan;
    margin-top: -10px;
    margin-bottom: -20px;
  }

  #d4 p {
    background-color: cyan;
    margin-top: -10px;
    margin-bottom: 10px;
  }
</style>
</html>